<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        编辑活动
                        <div class="return-style"><el-button icon="el-icon-arrow-left" @click.native="returnButton">返回</el-button></div>
                    </el-header>
                    <el-main class="info-main">
                       <el-row>
                            <el-col style="height: 100%;" :span="10" :offset="6">
                                <el-form ref="form" :rules="rules" :model="form" label-width="150px">
                                    <el-form-item label="活动名称：" prop="title">
                                        <el-input class="input-width" v-model="form.title"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="startTime" label="开始时间：">
                                        <el-date-picker
                                                v-model="form.startTime"
                                                type="date"
                                                class="input-width"
                                                placeholder="请选择时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item prop="endTime" label=" 到期时间：">
                                        <el-date-picker
                                                v-model="form.endTime"
                                                type="date"
                                                class="input-width"
                                                placeholder="请选择时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="上线/下架：">
                                        <el-radio-group v-model="form.isShow">
                                            <el-radio :label="1">上线</el-radio>
                                            <el-radio :label="0">下架</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item prop="name" label="标题图片：">
                                        <el-upload
                                                class="upload-demo"
                                                ref="upload"
                                                :action="uploadUrl"
                                                :data="imgData"
                                                :on-preview="handlePreview"
                                                :on-remove="handleRemove"
                                                :on-success="handleUpload"
                                                :file-list="fileList"
                                                :before-upload="beforeAvatarUpload"
                                                list-type="picture">
                                            <el-button style="margin-left: 10px;" size="small" icon="el-icon-upload" @click="submitUpload">选择上传文件</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png格式文件，文件不能超过500kb</div>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="活动描述：" prop="content" >
                                        <el-input class="input-width"
                                                type="textarea"
                                                :rows="4"
                                                placeholder="请输入内容"
                                                v-model="form.content">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm()">提交</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import activityApi from "@/api/operate/acitivity"
import request from '@/utils/request'
    export default {
        data() {
            return {

                // 临时储存图片地址
                imgUrl:'',
                form:{
                 
                },
                rules: {
                    title: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'}
                    ],
                },
	// request.defaults.baseURL 获取全局通用url前缀
                uploadUrl:request.defaults.baseURL+'/api-operate/activity/uploadImage',

                imgData:{
               title:'',

                },
              
                fileList:[],
            }
        },
        methods:{
            returnButton(){
                this.$router.replace({ path: "/operation/activity" });
            },
            submitForm() {
               this.update();
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            	handleUpload(file){
                    console.log(file);

                  let timestamp=new Date().getTime();

                  this.imgUrl=request.defaults.baseURL+'/api-operate'+file.data.url+'?timestamp='+timestamp;



                },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt500K = file.size /1024 < 500;
                if (!isJPG) {
                    this.$message.error('广告图片只能是 JPG和PNG 格式!');
                }
                if (!isLt500K) {
                    this.$message.error('广告图片大小不能超过 500K!');
                }
                return isJPG && isLt500K;
            },
          // 获取基本数据
            intData(){
             var id=parseInt(this.$route.query.id);
                activityApi.listById(id).then(response=>{
               console.log(response);
               this.form=response.data.data;
               this.imgData.title=response.data.data.title;
             
                })
            },
            // 跟新数据
            update(){

                let acitivity={
                   id:parseInt(this.$route.query.id),
                   title:this.form.title,
                   startTime:this.parseTime(this.form.startTime),
                   endTime: this.parseTime(this.form.endTime),
                   isShow:this.form.isShow,
                   imgUrl:this.imgUrl,
                   content:this.form.content,

                }

                activityApi.updateOne(acitivity).then(response=>{
                    this.$router.go(0);
                    this.$message(response.data.message)
                 
                })
            },


            // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }

      let d = new Date(str);

      let newDateYear = d.getFullYear();

      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;

      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";

      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    }
        },
        created(){

            this.intData();

            }
    }
</script>
<style scoped>
    .content-header{
        position: relative;
    }
    .return-style{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:250px;
    }
</style>